/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, Image, ScrollView,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数

import { TouchableOpacity } from "react-native-gesture-handler";
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import * as recycleAccessResultAction from "../actions/recycleAccessResultAction"; // 导入action方法
import BasePage from "../widget/common/BasePage";
import Button from "../widget/common/NCButton";
import TagGroup from "../widget/common/TagGroup";
import RowChooseItem from "../widget/common/RowChooseItem";
import DataPickerRow from "../widget/common/DataPickerRow";
import showStationPicker from "../utils/StationPickerUtil";
import { fDateCommon } from "../utils/utils";
import { isEmpty } from "../utils/utils";

const COMMONWIDTH = ScreenWidth - scale * 32;

let recycleValues;
let facilityId;
let deviceInfo;

class RecycleAccessResult extends Component {
  constructor(props) {
    super(props);
    recycleValues = NavigatorUtil.getPageParam(props, "recycleValues");
    deviceInfo = NavigatorUtil.getPageParam(props, "deviceInfo");
    facilityId = deviceInfo.facility_id;
  }

  componentWillMount() {
    const { props } = this;
    props.dispatch(recycleAccessResultAction.getDefaultAddress());
    props.dispatch(recycleAccessResultAction.initOrderRecycle(facilityId, recycleValues));
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(recycleAccessResultAction.unmount());
  }

  handleChooseAddress() {
    const { props } = this;
    NavigatorUtil.goAddressListCallBack(() => {
      props.dispatch(recycleAccessResultAction.getDefaultAddress());
    });
  }

  goAccessResultInfo() {
    const { props } = this;
    const { recycleAccessResultReducer } = props;
    const { data } = recycleAccessResultReducer;
    NavigatorUtil.goAccessResultInfo(deviceInfo, data, recycleValues, () => {});
  }

  renderAccessResult() {
    const { props } = this;
    const { recycleAccessResultReducer } = props;
    const { data } = recycleAccessResultReducer;
    const price = data.facility_recycle_price;
    return (
      <View style={styles.accessResultContainer}>
        <Text style={styles.textName}>{`${isEmpty(deviceInfo.brand_name) ? "" : deviceInfo.brand_name}  ${deviceInfo.facility_name}`}</Text>
        <View style={styles.priceContainer}>
          <Text style={styles.textPriceLogo}>￥</Text>
          <Text style={styles.textPrice}>{price}</Text>
        </View>
        <View style={styles.accessBtnContainer}>
          <Text style={styles.accessBtn} onPress={() => this.goAccessResultInfo()}>
            评估详情
          </Text>
          <View style={styles.verticalDivider} onPress={() => {}} />
          <Text style={[styles.accessBtn, { color: Color.tab_yellow }]} onPress={() => NavigatorUtil.goBack()}>
            重新评估
          </Text>
        </View>
      </View>
    );
  }

  renderServiceWay() {
    const { props } = this;
    const { recycleAccessResultReducer } = props;
    const { data, recycleTypeList } = recycleAccessResultReducer;
    return (
      <TagGroup
        title="回收方式"
        desc="(目前仅支持部分地区上门)"
        columnNum={3}
        data={recycleTypeList}
        keyName="name"
        onChange={d => props.dispatch(recycleAccessResultAction.changeRecycleWay(d))}
        valueName="index"
      />
    );
  }

  renderHomeReal() {
    const { props } = this;
    const { recycleAccessResultReducer } = props;
    const { dateTime, address, realType } = recycleAccessResultReducer;
    const fullAddress = address
      ? `${[address.province_name, address.city_name, address.county_name].join("-")}${address.detail_address}`
      : "请设置默认地址";
    return (
      <View style={styles.commonContent}>
        <TouchableOpacity onPress={() => realType === 2 && props.dispatch(recycleAccessResultAction.changeRealType(1))}>
          <View style={styles.row}>
            <Image
              source={realType === 1 ? require("../img/ic_selected.png") : require("../img/ic_unselected.png")}
              style={styles.imageReal}
            />
            <Text style={realType === 1 ? styles.textSelected : styles.textUnSelected}>上门交易</Text>
          </View>
        </TouchableOpacity>
        <RowChooseItem
          name="默认地址"
          value={fullAddress}
          disabled={realType === 2}
          onPress={() => this.handleChooseAddress()}
        />
        <View style={styles.divider} />
        <DataPickerRow
          name="选择时间"
          disabled={realType === 2}
          onDataSelected={data => props.dispatch(recycleAccessResultAction.changeDatetime(data))}
          defaultValue={dateTime}
        />
        <View style={styles.divider} />
      </View>
    );
  }

  handleChooseStation() {
    const { props } = this;
    showStationPicker().then(pickerValue => {
      props.dispatch(recycleAccessResultAction.changeStationName(pickerValue));
      props.dispatch(recycleAccessResultAction.changeStationCode(pickerValue));
    });
  }

  renderStationReal() {
    const { props } = this;
    const { recycleAccessResultReducer } = props;
    const { dateTime, stationName, realType } = recycleAccessResultReducer;
    return (
      <View style={styles.commonContent}>
        <TouchableOpacity onPress={() => realType === 1 && props.dispatch(recycleAccessResultAction.changeRealType(2))}>
          <View style={styles.row}>
            <Image
              source={realType === 2 ? require("../img/ic_selected.png") : require("../img/ic_unselected.png")}
              style={styles.imageReal}
            />
            <Text style={realType === 2 ? styles.textSelected : styles.textUnSelected}>地铁站交易</Text>
          </View>
        </TouchableOpacity>
        <RowChooseItem
          name="地铁站"
          disabled={realType === 1}
          value={`地铁${stationName.line_name}-${stationName.station_name}`}
          onPress={() => this.handleChooseStation()}
        />
        <View style={styles.divider} />
        <DataPickerRow
          name="选择时间"
          disabled={realType === 1}
          onDataSelected={data => props.dispatch(recycleAccessResultAction.changeDatetime(data))}
          defaultValue={dateTime}
        />
        <View style={styles.divider} />
      </View>
    );
  }

  handleClick() {
    const { props } = this;
    const { recycleAccessResultReducer } = props;
    const {
      facilitySign,
      dateTime,
      recycleTypeList,
      curRecycleWayIndex,
      realType,
      address,
      stationCode,
    } = recycleAccessResultReducer;
    props.dispatch(
      recycleAccessResultAction.planRecycleOrder(
        facilitySign,
        facilityId,
        recycleTypeList[curRecycleWayIndex].id,
        fDateCommon(dateTime),
        realType,
        stationCode.line_id,
        stationCode.station_id,
        address,
        res => NavigatorUtil.goPlaceRecycleOrder(res),
      ),
    );
  }

  renderButton() {
    return (
      <View style={styles.commonContent}>
        <Button
          onPress={() => this.handleClick()}
          buttonStyle={styles.btnContainer}
          textStyle={styles.buttonText}
          title="去下单"
        />
      </View>
    );
  }

  render() {
    const { recycleAccessResultReducer } = this.props;
    const { initing, loading } = recycleAccessResultReducer;
    return (
      <BasePage style={styles.container} showIniting={initing} showLoading={loading}>
        <ScrollView style={styles.container}>
          <View style={styles.contentContainer}>
            {this.renderAccessResult()}
            {this.renderServiceWay()}
            {this.renderHomeReal()}
            {this.renderStationReal()}
          </View>
        </ScrollView>
        {this.renderButton()}
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
  },
  contentContainer: {
    alignItems: "center",
  },
  priceContainer: {
    flexDirection: "row",
    alignItems: "flex-end",
    marginTop: scale * 8,
    marginBottom: scale * 14,
  },
  accessBtnContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  verticalDivider: {
    height: 18 * scale,
    width: 1,
    backgroundColor: Color.divider_secondary,
  },
  accessBtn: {
    marginLeft: scale * 16,
    marginRight: scale * 16,
    color: "#555D63",
  },
  textSubDesc: {
    fontSize: FontSize.SIZE_12,
    color: Color.text_desc,
  },
  textPrice: {
    fontSize: FontSize.SIZE_32,
    color: Color.text_price,
  },
  textPriceLogo: {
    marginRight: scale * 6,
    fontSize: FontSize.SIZE_14,
    color: Color.text_title,
    marginBottom: scale * 8,
  },
  textSelected: {
    fontSize: FontSize.SIZE_14,
    color: Color.tab_yellow,
  },
  textUnSelected: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_title,
  },
  row: {
    width: COMMONWIDTH,
    flexDirection: "row",
    alignItems: "center",
    marginBottom: scale * 16,
  },
  imageReal: {
    width: scale * 24,
    height: scale * 24,
    marginRight: scale * 8,
  },
  commonContent: {
    marginTop: scale * 24,
    width: ScreenWidth,
    alignItems: "center",
    backgroundColor: Color.white,
  },
  accessResultContainer: {
    elevation: 2,
    shadowOffset: { height: 1 },
    shadowColor: Color.black,
    shadowOpacity: 0.1,
    marginTop: scale * 16,
    marginBottom: scale * 16,
    width: COMMONWIDTH,
    height: scale * 140,
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 20 * scale,
    backgroundColor: Color.white,
  },
  textName: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_title,
    fontWeight: "bold",
  },
  buttonText: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
  },
  btnContainer: {
    height: 44 * scale,
    width: ScreenWidth - 88 * scale,
    marginTop: 28 * scale,
    marginBottom: 10 * scale,
    borderRadius: 5 * scale,
    borderWidth: 0,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.tab_yellow,
  },
  divider: {
    width: COMMONWIDTH,
    height: StyleSheet.hairlineWidth,
    backgroundColor: Color.divider_secondary,
  },
});

const reducers = state => {
  return {
    recycleAccessResultReducer: state.recycleAccessResultReducer,
  };
};
export default connect(reducers)(RecycleAccessResult);
